<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2024/2/8
  Time: 18:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>新增用户信息--异步请求上传图片</title>
</head>
<body>
<%--<form action="<%=request.getContextPath()%>/user2/add4" method="post">--%>
<p>用户名：<input id="username" type="text" name="username"></p>
<p>密码：<input id="password" type="password" name="password"></p>
<p>年龄：<input id="age" type="number" name="age"></p>
<p>生日(yyyy-MM-dd HH:mm:ss)：<input id="bornDate" type="text" name="bornDate"></p>
<p>照片：<input type="file" id="photo">
  <input id="btn-upload" type="button" value="上传"/>
  <%--图片上传成功后在此显示--%>
  <img id="img-photo" src="" alt="" width="100px">
  <%--    保存图片上传成功后的地址，以便提交给后台服务器保存--%>
  <input id="input-photo" type="hidden" name="photo" value="">
</p>
<p>
  <button id="btn-save">保存</button>
</p>
<%--</form>--%>
</body>
<script src="<%=request.getContextPath()%>/statics/js/jquery-3.7.1.js"></script>
<script>
    $(function () {
        $("#btn-upload").click(function () {
            // 创建一个FormData对象，以便异步上传到服务器
            // jquery转为js对象 $("#cover").get(0).files[0]
            let file = new FormData();
            file.set("photo", $("#photo").get(0).files[0]);
            $.ajax({
                url: "<%=request.getContextPath()%>/upload/image",
                type: 'POST',
                processData: false,
                // 设置格式
                contentType: false,
                data: file,
                success: function (data) {
                    if (data.code == "200") {
                        // 显示图片
                        $("#img-photo").attr("src", "<%=request.getContextPath()%>/statics/images/" + data.data);
                        // 保存图片地址到文本框中
                        $("#input-photo").val(data.data);
                    } else {
                        // 错误的结果
                        alert("上传图片发生错误，请稍后重试。。。");
                        $("#input-cover").val('');
                        console.log(data.message);
                    }
                },
                error: function (textStatus) {
                    console.log(textStatus);
                }
            });
        });

        $("#btn-save").click(function () {
            let user = {}
            user.username = $("input[name = 'username']").val();
            user.password = $("input[name = 'password']").val();
            user.age = $("input[name = 'age']").val();
            user.bornDate = $("input[name = 'bornDate']").val();
            user.photo = $("input[name = 'photo']").val();

            $.ajax({
                url: "<%=request.getContextPath()%>/user2/add5",
                type: 'POST',
                contentType: 'application/json;charset=utf-8',
                dataType: 'json',
                data: JSON.stringify(user),
                success: function (data) {
                    if (data.code == "200") {
                        alert("添加成功！");
                    } else {
                        alert("添加失败！");
                        console.log(data.message)
                    }
                },
                error: function (e) {
                    console.log(e);
                }
            });
        })
    })
</script>
</html>
